﻿@{
    ViewBag.Title = "Asignación de Habitaciones";
}

<br />
<div class="filtering">
    <form name="habitaciones">
        <div id="accHabitacionFilter">
            <h3>Datos Generales</h3>
            <div>
                <table>
					<tr>
						<td>Apellidos:</td>
                        <td><input type="text" name="apellidos" id="f-apellidos" maxlength="100" /></td>
                        <td>Nombres:</td>
                        <td><input type="text" name="nombres" id="f-nombres" maxlength="100" /></td>
                    </tr>
                    <tr>
                        <td>ID:</td>
                        <td><input type="text" name="idGrupo" id="f-idGrupo" maxlength="5" /></td>
                        <td>Descripci&oacute;n:</td>
                        <td><input type="text" name="descripcion" id="f-descripcion" maxlength="50" /></td>
                    </tr>
                    <tr>
                        <td>Cantidad de personas:</td>
                        <td><input type="text" name="cantidadDePersonas" id="f-cantidadDePersonas" maxlength="5" /></td>
                        <td>No. Habitaci&oacute;n: </td>
                        <td><input type="text" name="noHabitacion" id="f-noHabitacion" maxlength="5" /></td>
                    </tr>
                    <tr>
                        <td>Edificio:</td>
                        <td><input type="text" name="edificio" id="f-edificio" maxlength="15" /></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
        <p class="centered">
            <button type="submit" id="ConsultarButton">Consultar</button>
        </p>
    </form>
</div>
<div id="ui-dialog-asignar">
    <input type="hidden" name="idGrupo" id="Asignar-idGrupo" value="">
    <div class="filtering">
        <form>
            C&oacute;digo participante:
            <input type="text" name="codigo" id="Asignar-codigo" class="asignar-codigo" />
            <img src="~/Content/images/ID.png" title="Buscar Participante" onclick="BuscarParticipante('#ui-dialog-participante');" />
            <p class="centered">
                <button type="submit" id="AgregarButton">Agregar</button></p>
        </form>
    </div>
    <div id="AsignaTable"></div>
</div>
<div id="ui-dialog-participante">
    <div class="filtering">
        <form>
            Nombres:
            <input type="text" class="fnombres" />
            Apellidos:
            <input type="text" class="fapellidos" />
            C&oacute;digo:
            <input type="text" class="fcodigo" />
            <p class="centered">
                <button type="submit" class="ConsultarPButton">Consultar</button>
            </p>
        </form>
    </div>
    <div class="ParticipanteTable"></div>
</div>
<div id="HabitacionTable"></div>
@section Scripts {
    <script type="text/javascript" src="~/Scripts/jfunciones-participante.js"></script>
    <script type="text/javascript">
        function OpenAsignar(idGrupo) {
            $('#Asignar-codigo').val('');
            $('#Asignar-idGrupo').val(idGrupo);
            
            $('#AsignaTable').jtable('load', {
                idGrupo: idGrupo
            });
            $('#ui-dialog-asignar').dialog('open');
        }
        $(document).ready(function () {
            $('#HabitacionTable').jtable({
                title: '@ViewBag.Title',
                paging: true,
                pageSize: 25,
                sorting: true,
                multiSorting: true,
                defaultSorting: 'nombre ASC',
                actions: {
                    listAction: '@Url.Action("HabitacionList", "Evento")',
                    deleteAction: '@Url.Action("DeleteHabitacion", "Evento")',
                    updateAction: '@Url.Action("UpdateHabitacion", "Evento")',
                    createAction: '@Url.Action("CreateHabitacion", "Evento")'
                },
                toolbar: {
                    items: [{
                        tooltip: 'Exportar a Excel',
                        icon: GetAppURL() + '/Content/images/excel.png',
                        text: 'Exportar a Excel',
                        click: function () {
                            var sUrl = '@Url.Action("AsignacionExportExcel", "Evento")?' +
                                $('.filtering form[name=habitaciones]').serialize();
                            window.open(sUrl, 'Exportar a Excel');
                        }
                    }]
                },
                fields: {
                    asignar: {
                        title: '',
                        width: '2%',
                        sorting: false,
                        edit: false,
                        create: false,
                        display: function (data) {
                            var $img = $('<img src="' + GetAppURL() + '/Content/images/distribuir.png" title="Asignar participantes" />');
                            //Abrir dialog de inscribir al hacer click
                            $img.click(function () {
                                OpenAsignar(data.record.idGrupo);
                           });
                           return $img;
                       }
                    },
                    idGrupo: {
                        key: true,
                        title: 'ID',
                        width: '2%'
                    },
					principal: {
                        title: 'Principal',
                        create: false,
                        edit: false,
                        width: '20%'
                    },
                    descripcion: {
                        title: 'Descripción',
                        inputClass: 'validate[required,maxSize[50]]',
                        width: '10%'
                    },
                    cantidadDePersonas: {
                        title: 'Capacidad',
                        inputClass: 'validate[custom[number]]',
                        width: '3%'
                    },
                    edificio: {
                        title: 'Edificio',
                        inputClass: 'validate[maxSize[15]]',
                        width: '3%'
                    },
                    noHabitacion: {
                        title: 'No. Habitación',
                        inputClass: 'validate[custom[number]]',
                        width: '3%'
                    },
                    observaciones: {
                        title: 'Observaciones',
                        list: false,
                        type: 'textarea',
                        inputClass: 'validate[maxSize[300]]'
                    }
                },
                formCreated: function (event, data) {
                    data.form.validationEngine();
                },
                formSubmitting: function (event, data) {
                    return data.form.validationEngine('validate');
                },
                formClosed: function (event, data) {
                    data.form.validationEngine('hide');
                    data.form.validationEngine('detach');
                }
            });

            $('#AsignaTable').jtable({
                paging: false,
                actions: {
                    listAction: '@Url.Action("AsignacionList", "Evento")',
                    deleteAction: '@Url.Action("DeleteAsignacion", "Evento")',
                    updateAction: '@Url.Action("UpdateAsignacion", "Evento")'
                },
                fields: {
                    idAsignacionGrupo: {
                        key: true,
                        list: false,
                        edit: false
                    },
                    idGrupo: {
                        type: 'hidden'
                    },
                    idParticipanteXEvento: {
                        type: 'hidden'
                    },
                    codigo: {
                        title: 'Código',
                        edit: false
                    },
                    nombre: {
                        title: 'Nombre',
                        edit: false
                    },
                    observaciones: {
                        title: 'Observaciones',
                        list: false,
                        type: 'textarea',
                        inputClass: 'validate[maxSize[300]]'
                    }
                },
                formCreated: function (event, data) {
                    data.form.validationEngine();
                },
                formSubmitting: function (event, data) {
                    return data.form.validationEngine('validate');
                },
                formClosed: function (event, data) {
                    data.form.validationEngine('hide');
                    data.form.validationEngine('detach');
                }
            });

            $('#ConsultarButton').click(function (e) {
                e.preventDefault();
                $('#HabitacionTable').jtable('load', $('.filtering form[name=habitaciones]').serializeArray());
            });
            $('#AgregarButton').click(function (e) {
                e.preventDefault();
                sendObj = {
                    idGrupo: $('#Asignar-idGrupo').val(),
                    codigo: $('#Asignar-codigo').val()
                };
                _ajaxCall({
                    url: GetAppURL() + "/Evento/AsignarHabitacion",
                    data: sendObj,
                    success: function (result) {
                        $('#AsignaTable').jtable('addRecord', {
                            record: {
                                idAsignacionGrupo: result.Record.idAsignacionGrupo,
                                idGrupo: result.Record.idGrupo,
                                idParticipanteXEvento: result.Record.idParticipanteXEvento,
                                codigo: result.Record.codigo,
                                nombre: result.Record.nombre,
                                observaciones: result.Record.observaciones
                            },
                            clientOnly: true
                        });
                        $('#Asignar-codigo').val('');
                    }
                });
            });
            $("#accHabitacionFilter").accordion({ heightStyle: "content", collapsible: true });
            $("#ui-dialog-asignar").dialog({
                title: "Asignar Habitación", autoOpen: false, modal: true, draggable: true,
                height: "auto", resizable: true, width: 700,
                buttons: {
                    "Aceptar": function () {
                        $(this).dialog("close");
                    }
                }
            });

            LoadParticipante(false, '#ui-dialog-participante', 'asignar-codigo', true);
            $('#ConsultarButton').click();
        });
    </script>
}